import { Ionicons } from "@expo/vector-icons";
import { useRouter } from "expo-router";
import { useState } from "react";
import { Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { FlatList, Gesture, GestureDetector, GestureHandlerRootView, TextInput } from "react-native-gesture-handler";
import Animated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
import { SafeAreaView } from "react-native-safe-area-context";
import ConfirmModal from "../components/confirmModal";
import Header from "../components/header";
import StoreModal from "../components/storeModal";
import { StoreEntry } from "../models/store_entry";
const data = ["Item1", "Item2", "Item3"]

export default function HomeScreen() {

  const router = useRouter();
  const [visible, setVisible] = useState(false);
  const [search, setSearch] = useState<string>("");
  const [shopVisible, setShopVisible] = useState(false);
  const [storeEntry, setStoreEntry] = useState<StoreEntry>({ GUID: "", Name: "默认店铺" });


  function SwipeableItem({ item }: { item: string }) {
    const translateX = useSharedValue(0);

    const panGesture = Gesture.Pan()
      .onUpdate((e) => {
        // translateX.value = Math.min(Math.max(e.translationX, -100), 0); // 左滑最大 -100
      })
      .onEnd(() => {
        // translateX.value = withSpring(0); // 松手回弹
      });

    const animatedStyle = useAnimatedStyle(() => ({
      transform: [{ translateX: translateX.value }]
    }));

    return (
      <GestureDetector gesture={panGesture}>
        <Animated.View style={[styles.row, animatedStyle]}>
          <View style={styles.itemRow}>
            <Text >{item}</Text>
            <TouchableOpacity style={styles.itemBtn} onPress={() => {
              router.push({ pathname: "/pages/KouFeiScreen", params: { "userID": "sasd", "userName": "bb" } });
              // setVisible(true) 
            }}>
              <Text style={styles.buttonText}>{'记者'}</Text>
            </TouchableOpacity>
          </View>
        </Animated.View>
      </GestureDetector>


    );
  }
  return <SafeAreaView style={styles.container}>
    <View style={styles.container}>
      <Header title="测试" rightIcon="add" onRightPress={() => {
      }}></Header>
      {/* 功能区：搜索 + 店铺选择 */}
      <View style={styles.filterBar}>
        {/* 搜索框 */}
        <View style={styles.searchBox}>
          <Ionicons name="search" size={18} color="#666" style={{ marginRight: 6 }} />
          <TextInput
            style={styles.searchInput}
            placeholder="搜索项目..."
            value={search}
            onChangeText={setSearch}
            placeholderTextColor="#999"
            underlineColorAndroid="transparent"  // ✅ 去掉安卓下划线
            selectionColor="#333"                 // ✅ 自定义光标颜色
          />
        </View>

        {/* 店铺选择 */}
        <TouchableOpacity
          style={styles.shopSelector}
          activeOpacity={1}
          onPress={() => setShopVisible(!shopVisible)}
        >
          <Text style={styles.shopText}>{storeEntry.Name}</Text>
          <Ionicons name={shopVisible ? "chevron-up" : "chevron-down"} size={18} color="#333" />
        </TouchableOpacity>
      </View>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <FlatList data={data} keyExtractor={(item, index) => index.toString()} renderItem={({ item }) => <SwipeableItem item={item} />}>
        </FlatList>
      </GestureHandlerRootView>
    </View>
    <ConfirmModal
      visible={visible}
      title="测试"
      message="提示"
      onConfirm={() => {

      }}
      onCancle={() => {
        setVisible(false)
      }}></ConfirmModal>
    <StoreModal
      GUID=""
      visible={shopVisible}
      onCancle={() => {
        setShopVisible(false)
      }}
      onConfirm={(item) => {
        setShopVisible(false);
        setStoreEntry(item)
      }}></StoreModal>
  </SafeAreaView>
}


const styles = StyleSheet.create({
  container: {
    display: 'flex',
    height: '100%',
    flexDirection: 'column',
    backgroundColor: '#fff'
  },
  row: {
    backgroundColor: '#fff',
    padding: 10,
    borderBottomWidth: 1,
    borderColor: '#eee',
  },
  itemRow: {
    position: 'relative',         // 父容器相对定位
    padding: 12,
    paddingRight: 80,             // 留出按钮空间
  },
  itemBtn: {
    position: 'absolute',         // 绝对定位
    right: 12,                    // 距离父容器右边
    display: 'flex',
    top: 12,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    fontWeight: '600'
  },
  filterBar: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 12,
    paddingVertical: 8,
    backgroundColor: "#f9f9f9",
    borderBottomWidth: 1,
    borderColor: "#eee",
  },
  searchBox: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#fff",
    borderRadius: 8,
    borderWidth: 1,
    paddingHorizontal:4,
    borderColor: "#ddd",
    height: 36,
  },
  searchInput: {
    flex: 1,
    paddingHorizontal: 8,
    height: '100%',
    fontSize: 14,
    backgroundColor:'#fff',
    color: "#333",
     ...(Platform.OS === "web" && {
      outlineWidth: 0,
      boxShadow: "none",
      borderWidth: 0,
    }),
  },
  shopSelector: {
    flexDirection: "row",
    alignItems: "center",
    marginLeft: 10,
    backgroundColor: "#fff",
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 8,
    paddingHorizontal: 10,
    height: 36,
  },
  shopText: {
    marginRight: 4,
    color: "#333",
    fontSize: 14,
  },

});